<template>
  <div id="space_id">
    <div class="space_top">
      <div class="space_add">
        <el-button size="mini" round @click="isShow.flag = true"
          >增加</el-button
        >
      </div>
    </div>
    <el-table :data="space_list" style="width: 100%; text-align: center">
      <el-table-column prop="id" label="ID"> </el-table-column>
      <el-table-column prop="specsname" label="规格名称"> </el-table-column>
      <el-table-column prop="attrs" label="规格可选值" v-slot="$props">
        <template>
          <el-button
            size="mini"
            type="success"
            v-for="attr in $props.row.attrs"
            :key="attr"
            >{{ attr }}</el-button
          >
        </template>
      </el-table-column>
      <el-table-column prop="status" label="规格状态" v-slot="$props">
        <template>
          <el-button size="mini" type="success" v-if="$props.row.status === 1"
            >正常</el-button
          >
          <el-button size="mini" type="danger" v-if="$props.row.status === 0"
            >禁用</el-button
          >
        </template>
      </el-table-column>
      <el-table-column label="操作" v-slot="$props">
        <template>
          <el-button size="mini" type="warning" @click="updataSpace($props.row)"
            >修改</el-button
          >
          <el-button size="mini" type="danger" @click="delSpace($props.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="page_size"
      @current-change="change_page"
    >
    </el-pagination>
    <addSpace
      ref="add_space_ref"
      :isShow="isShow"
      @reloadSpace="reloadSpace"
    ></addSpace>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import addSpace from "../components/addSpace.vue";
export default {
  data() {
    return {
      page: 1,
      page_size: 1,
      isShow: { flag: false },
    };
  },
  created() {
    this.SpaceListAction();
    this.SpaceCountAction();
  },
  methods: {
    Del(id) {
      this.$http.post("/api/specsdelete", { id }).then((res) => {
        if (res.code === 200) {
          this.SpaceListAction();
          this.SpaceCountAction();
        }
      });
    },
    delSpace(id) {
      this.$confirm("确定要删除此规格吗？", "删除此规格", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          this.Del(id);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reloadSpace() {
      this.SpaceListAction();
      this.SpaceCountAction();
    },
    updataSpace(obj) {
      this.isShow.flag = true;
      this.$refs.add_space_ref.setData(obj);
    },
    change_page(page) {
      this.page = page;
      this.SpaceListAction({ page: this.page, page_size: this.page_size });
    },
    ...mapActions("SpaceStore", ["SpaceListAction", "SpaceCountAction"]),
  },
  computed: {
    ...mapState({
      space_list: (state) => state.SpaceStore.space_list,
      total: (state) => state.SpaceStore.total,
    }),
  },
  components: {
    addSpace,
  },
};
</script>

<style>
#space_id .space_top {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
}
#space_id .el-table {
  margin-top: 20px;
}
#space_id .space_add > button {
  width: 80px;
  color: #ff5d3e;
  background-color: white;
}
</style>